<template>
    <div>
        <header>
            <div class="top-list">
                <el-page-header  content="歌单">
                </el-page-header>
            </div>
            <div class="content1">
                <img class="img" src="@/assets/songlist.jpg" alt="">
                <div class="right">
                    <h3> <i class="el-icon-info"></i>精品歌单</h3>
                    <span class="ll">居家古风 如何把生活过成诗</span>
                     <h4>生活不总是诗，但是我们可以把生活过成诗。</h4>
                </div>
            </div>
        </header>
        <div class="navigate1">
            <span class="nav-list">全部歌单<i class="el-icon-arrow-right"></i></span>
            <div class="link-classfy">
                <a href="">华语</a>
                <a href="">轻音乐</a>
                <a href="">摇滚</a>
            </div>
        </div>     
        <div class="list">
            <div @click="link" class="link" v-for="item in arrList" :key="item.id">
                <dl>
                    <dt><img :src="item.coverImgUrl" alt=""></dt>
                    <dd>{{item.name}}</dd>
                </dl>
            </div>
        </div>
    </div>
</template>
<script>
  //引入请求api
  import { getSonglist } from "@/api" 
  export default {
    data(){
          return{ 
              arrList:[],
          }
      },
    created () {
        this.getSonglist()
    },
    methods: {
        getSonglist(){
            getSonglist()
            .then(res => {
                console.log(res)
                let data = res.data.playlists
                // console.log(data)
                this.arrList = data;
            }) 
        },
        link(){
            //  console.log(this.$router)
            //跳转到歌单详情页
            this.$router.push("/songlistdetail")
        }
    }
  }
</script>
<style>
.top-list{
    height: 60px;
     background-image: linear-gradient(to right bottom, #3c4334,#686959);
}
    .el-icon-back:before{
        font-size:40px;
        position: relative;
        top:10px;
        left:5px;
        color:white;
    } 
    .el-page-header__title{
        font-size:30px;
        position: relative;
        top:25px;
        left:20px;
        color:white;
    }
   .el-page-header__content{
        font-size:30px;
        position: relative;
        top:25px;
        left:100px;
        color:white;
   }
   .navigate1{
       padding:30px 0 30px 0
   }
   .navigate1 .link-classfy{
      float:right;
      margin-right:30px;
  }
  .navigate1 .link-classfy a{
    color: #666666;
    margin-left:20px;
  }
   .el-icon-arrow-right:before{
       font-size:40px;
       font-weight: 600;
   }
   .nav-list{
       font-size:42px;
       font-weight: 600;
       position: relative;
       left:-160px;
   }
   .right{
        position: absolute;
        left:200px;
        font-size:30px;
        color:white;
        /* border:1px solid black; */
    }
   .right h3{
       font-size:32px;
   }
    .ll{
        line-height: 60px;
    }
   .right  h4{
        font-size:20px;
    }
    .content1{
        height:230px;
        background: #81646c;
        /* border:1px solid black; */
        position: relative;
        /* background-image:url(../../assets/bg.jpg) cover; */
        background: url(../../assets/bg.jpg) no-repeat;
        background-size:cover;
    }
    .content1 .img{
        position: absolute;
        top:20px;
        left:20px;
        height:190px;
        width:280px;
    }
    
   .list .link{
       display: block;
       float: left;
       height:400px;
       width:370px;
       /* border:1px solid black; */
       overflow: hidden;
       color:black;
       font-size: 28px;
       margin-bottom: 10px;

   }
    .list .link dl dt img{
        height:320px;
        width:340px;
        border-radius: 15px;
        margin-bottom: 10px;
    }
    .list .link dl dd{
        overflow: hidden;
    }
</style>